<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wrap{
			width: 300px;
			
			margin: 0 auto;
			position: relative;
		}
		.content{
			background: #6AD1D6;
			width: 100%;
		}
		.container{
			width:100%;
			height: 300px;
			position: relative;
			
		}
		.container img{
			width: 300px;
			height: 300px;
			position: absolute;
			top:0;
			left: 0;
		}
		.top{
			height: 50px;
			padding-top:10px;
			color:#fff;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
		}
		#clickarea{
			width: 280px;
			height: 100px;
			line-height: 100px;
			margin: 10px auto;
			background: #4685C3;
			color:#fff;
			text-align: center;
			font-weight: bold;
			font-size: 20px;
		}
		#moreTime{
			background:#FF8309;
			border: 0;
			outline: none;
			border-radius: 5px;
			color: #fff;	
			display: inline-block;
			width: 120px;
			height: 40px;
			line-height: 40px;
			font-size: 26px;
		}
		.fade{
			display: none;
		}
		.in{
			display: block;
		}

		#popScore{
			box-sizing:border-box;
			width:100%;
			height:100%;
			padding-top: 50%;
			text-align: center;
			position: absolute;
			top:0;
			left:0;
			display: none;
			font-size: 26px;
			font-weight: bold;
		}
		#popScore.block{
			background: rgba(0,0,0,0.8);
			z-index: 100;
			color:#fff;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="content">
			<div class="top">
				<div class="title">时间 <span id="time">10.00</span></div>
				<div class="clickNum">打脸次数：<span id="num"></span></div>
			</div>
			<div class="container">
				<img src="img/A1.png" alt="2" id="left" class="fade">
				<img src="img/A2.png" alt="3" id="right" class="fade">
				<img src="img/A0.png" alt="1" id="initImg">
			</div>
			<div id="clickarea">点击这里</div>
		</div>
		<div id="popScore">
			<p id="showNum"></p>
		</div>
	</div>

	<script>
	function init(){
		var time = document.getElementById("time");
		var begin = document.getElementById("begin");
		var popScore = document.getElementById("popScore");
		var clickarea = document.getElementById('clickarea');
		var left = document.getElementById("left");
		var right = document.getElementById("right");
		var initImg = document.getElementById("initImg");
		var num = document.getElementById("num");
		var showNum = document.getElementById("showNum");

		var beatNum = 0;
		var duration = 10000;
    	var endTime = new Date().getTime() + duration;

    	function interval(){
        	var n = (endTime-new Date().getTime())/1000;
        	time.innerHTML = n.toFixed(2);
        	if(n<0.1) {
        		n = 0;
        		time.innerHTML = n+".00";
        		remove();
        		clearTimeout();
        		return;
        	}
        	
        	setTimeout(interval, 70);
    	}
	   

	    function beatClick() {
	    	beatNum++;
	    	initImg.classList.add("fade");
    		interval();
	    	start();
	    	num.innerHTML = beatNum;
	    }
		
	    function start(){
	    	if(left.classList.contains("in")){
	    		left.classList.remove("in");
	    		left.classList.add("fade");
	    		right.classList.remove("fade");
	    		right.classList.add("in");
	    	}else{
	    		left.classList.add("in");
	    		left.classList.remove("fade");
	    		right.classList.remove("in");
	    		right.classList.add("fade");
	    	}
	    }

	    function remove(){
	    	clickarea.removeEventListener('click',beatClick);
	    	clickarea.innerHTML = "时间到！"
	    	popScore.style.display = "block";
	    	popScore.classList.add("block");
	    	showNum.innerHTML = "共打了"+beatNum+"次"; 	
	    }

	    clickarea.addEventListener('click',beatClick);

	}

	init();

	</script>

</body>
</html>